<template>
	<view class="page-container">
		<!-- 套餐图片区域 -->
		<view class="image-container">
			<up-image
				class="combo-image"
				width="100%"
				height="500rpx"
				:src="config.baseUrl+comboInfo?.pics"
				mode="aspectFill"
				radius="0 0 40 40"
			>
				<template #error>
					<view class="image-error">
						<up-icon name="photo" color="#ddd" size="40"></up-icon>
						<text>图片加载失败</text>
					</view>
				</template>
			</up-image>
			<view class="image-overlay"></view>
		</view>

		<!-- 套餐基本信息 -->
		<view class="combo-info-card">
			<view class="combo-header">
				<view class="combo-name">{{comboInfo?.comboName}}</view>
				<up-tag
					class="meal-tag"
					text="午餐"
					type="success"
					icon="clock"
					size="small"
					bgColor="rgba(111, 215, 25, 0.1)"
					color="#6FD719"
					borderColor="transparent"
				></up-tag>
			</view>
			<view class="dish-info">
				<up-icon name="list" color="#6FD719" size="16"></up-icon>
				<text class="dish-name">{{comboInfo?.dishName}}</text>
			</view>
		</view>

		<!-- 营养价值区域 -->
		<view class="nutrition-section">
			<view class="section-header">
				<up-icon name="heart" color="#6FD719" size="20"></up-icon>
				<text class="section-title">营养价值</text>
			</view>

			<template v-if="comboInfo?.dataList?.length > 0">
				<view class="nutrition-card" v-for="(item,index) in comboInfo.dataList" :key="index">
					<!-- 主菜信息 -->
					<view class="nutrition-item main-dish">
						<view class="item-header">

							<text class="item-label">主菜</text>
						</view>
						<text class="item-value">{{item.name || '---'}}</text>
					</view>

					<!-- 配料信息 -->
					<view class="nutrition-item">
						<view class="item-header">
							<text class="item-label">配料</text>
						</view>
						<text class="item-value">{{item.batching || '---'}}</text>
					</view>

					<!-- 营养成分 -->
					<view class="nutrition-grid">
						<view class="grid-item">
							<view class="grid-icon">🔥</view>
							<text class="grid-label">热量</text>
							<text class="grid-value">{{item.quantity || '---'}}</text>
						</view>
						<view class="grid-item">
							<view class="grid-icon">💪</view>
							<text class="grid-label">蛋白质</text>
							<text class="grid-value">{{item.protein || '---'}}</text>
						</view>
						<view class="grid-item">
							<view class="grid-icon">🥑</view>
							<text class="grid-label">脂肪</text>
							<text class="grid-value">{{item.fat || '---'}}</text>
						</view>
						<view class="grid-item">
							<view class="grid-icon">🍊</view>
							<text class="grid-label">维生素C</text>
							<text class="grid-value">{{item.vitaminC || '---'}}</text>
						</view>
					</view>

					<!-- 备注信息 -->
					<view class="nutrition-item notes" v-if="item.notes">
						<view class="item-header">
							<up-icon name="info-circle" color="#2196F3" size="16"></up-icon>
							<text class="item-label">备注</text>
						</view>
						<text class="item-value notes-text">{{item.notes}}</text>
					</view>
				</view>
			</template>

			<template v-else>
				<view class="empty-container">
					<up-empty
						mode="search"
						text="暂无营养数据"
						textColor="#999"
						iconColor="#ddd"
					></up-empty>
				</view>
			</template>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		config
	} from '../../config/index'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getComboInfo
	} from '../../api/combo.js';
	const comboInfo = ref();
	onLoad((options) => {
		const id = options.id;
		getComboInfo(id).then((data) => {
			comboInfo.value = data;
			if (comboInfo.value.descption) {
				comboInfo.value.dataList = JSON.parse(comboInfo.value.descption)
			}

		}).catch(() => {
			uni.navigateBack();
		})
	})
</script>

<style lang="scss" scoped>
	.page-container {
		background: linear-gradient(180deg, #F8FAFB 0%, #FFFFFF 100%);
		min-height: 100vh;
		padding-bottom: 40rpx;
	}

	/* 图片区域 */
	.image-container {
		position: relative;
		overflow: hidden;
	}

	.combo-image {
		width: 100%;
		height: 500rpx;
	}

	.image-error {
		width: 100%;
		height: 500rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, #F5F7FA 0%, #E8EAED 100%);
		gap: 16rpx;

		text {
			font-size: 28rpx;
			color: #999;
		}
	}

	.image-overlay {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 80rpx;
		background: linear-gradient(to top, rgba(248, 250, 251, 0.8), transparent);
	}

	/* 套餐信息卡片 */
	.combo-info-card {
		background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFB 100%);
		margin: -40rpx 30rpx 30rpx;
		border-radius: 30rpx;
		padding: 40rpx 30rpx;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
		border: 1px solid rgba(255, 255, 255, 0.8);
		position: relative;
		z-index: 10;
	}

	.combo-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.combo-name {
		font-size: 42rpx;
		font-weight: 600;
		color: #333;
		line-height: 1.4;
		flex: 1;
		margin-right: 20rpx;
	}

	.meal-tag {
		flex-shrink: 0;
	}

	.dish-info {
		display: flex;
		align-items: center;
		gap: 12rpx;
		padding: 20rpx;
		background: rgba(111, 215, 25, 0.05);
		border-radius: 20rpx;
		border: 1px solid rgba(111, 215, 25, 0.1);
	}

	.dish-name {
		font-size: 30rpx;
		color: #333;
		line-height: 1.4;
	}

	/* 营养价值区域 */
	.nutrition-section {
		margin: 0 30rpx;
	}

	.section-header {
		display: flex;
		align-items: center;
		gap: 12rpx;
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
	}

	.nutrition-card {
		background: linear-gradient(135deg, #FFFFFF 0%, #FAFBFC 100%);
		border-radius: 25rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
		border: 1px solid rgba(255, 255, 255, 0.8);
	}

	.nutrition-item {
		margin-bottom: 24rpx;

		&:last-child {
			margin-bottom: 0;
		}

		&.main-dish {
			border-left: 6rpx solid #FF6B35;
			padding-left: 20rpx;
		}

		&.notes {
			background: rgba(33, 150, 243, 0.05);
			padding: 20rpx;
			border-radius: 15rpx;
			border: 1px solid rgba(33, 150, 243, 0.1);
		}
	}

	.item-header {
		display: flex;
		align-items: center;
		gap: 8rpx;
		margin-bottom: 12rpx;
	}

	.item-label {
		font-size: 28rpx;
		color: #666;
		font-weight: 500;
	}

	.item-value {
		font-size: 30rpx;
		color: #333;
		line-height: 1.5;
	}

	.notes-text {
		font-style: italic;
		color: #2196F3;
	}

	/* 营养成分网格 */
	.nutrition-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20rpx;
		margin: 20rpx 0;
	}

	.grid-item {
		background: linear-gradient(135deg, #F8FAFB 0%, #FFFFFF 100%);
		border-radius: 20rpx;
		padding: 24rpx;
		text-align: center;
		border: 1px solid rgba(111, 215, 25, 0.1);
		transition: all 0.3s ease;
	}

	.grid-item:active {
		transform: scale(0.95);
		background: rgba(111, 215, 25, 0.05);
	}

	.grid-icon {
		font-size: 32rpx;
		margin-bottom: 8rpx;
	}

	.grid-label {
		display: block;
		font-size: 24rpx;
		color: #999;
		margin-bottom: 8rpx;
	}

	.grid-value {
		display: block;
		font-size: 28rpx;
		color: #333;
		font-weight: 600;
	}

	/* 空状态 */
	.empty-container {
		background: linear-gradient(135deg, #FFFFFF 0%, #FAFBFC 100%);
		border-radius: 25rpx;
		padding: 60rpx 30rpx;
		text-align: center;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
	}

	/* 动画效果 */
	.combo-info-card,
	.nutrition-card {
		animation: fadeInUp 0.6s ease-out;
	}

	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(30rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>